<template>
  <div class="tabs-box">
    <div class="tab-item" v-for="(item, index) of list" :key="index" :class="{active: activeIndex === index}" @click="changeTab(index)">{{item}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['全部', '研究报告', '图谱'],
      activeIndex: 0
    }
  },
  methods: {
    changeTab(index) {
      this.activeIndex = index;
    }
  }
}
</script>

<style lang="scss" scoped>
.tabs-box {
  width: 100%;
  height: 52px;
  background: #F9F9F9;
  border-radius: 4px 0px 0px 4px;
  text-align: center;
  .tab-item {
    display: inline-block;
    font-size: 20px;
    
    font-weight: 400;
    color: #696969;
    line-height: 52px;
    padding: 0 30px;
    cursor: pointer;
    &.active {
      position: relative;
      font-weight: 600;
      color: #272727;
      &::after {
        position: absolute;
        bottom: 0;
        left: 50%;
        content: '';
        width: 20px;
        height: 4px;
        margin-left: -10px;
        background: #F96868;
      }
    }
  }
}
</style>